{extend name="indexextends"}


{block name="title"}文章发布{/block}

{block name='article'}layui-this{/block}


{block name='nr'}
<style>
    #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
    }
    #toolbar-container { border-bottom: 1px solid #ccc; }
    #editor-container { height: 700px; }
</style>


<form  enctype="multipart/form-data" method="post" class="layui-form" style="width: 1200px;margin: 0px auto" id="forms" >


    <div class="layui-form-item">


        <div class="layui-form-item">
            <label  class="layui-form-label"><span style="color: red">*</span>栏目</label>
            <div class="layui-input-block">
                <input type="text" name="treeid" id="tree" lay-filter="tree" class="layui-input" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>文章标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item" >
            <label class="layui-form-label">发布时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="test1" placeholder="选择发布时间" name="time">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">上传缩略图</label>
        <div class="layui-upload" >
            <button type="button" class="layui-btn" id="test2">上传图片</button>
            <input type="hidden" name="thumbnailUrl" id="thumbnailUrl">
            <div class="layui-upload-list" style="margin-left: 9%">
                <img class="layui-upload-img" id="demo1" style="width: 10%">
                <p id="demoText" ></p>
            </div>

            <div  style="width: 95px;margin-left: 9%">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>


        </div>
        </div>
    </div>

    <p>注意事项：要上传过大的视频或图片时请先修改php.ini中</p>
    <p>post_max_size，upload_max_filesize</p>
    <div id="editor—wrapper" >
        <div id="toolbar-container"><!-- 工具栏 --></div>
        <div id="editor-container"><!-- 编辑器 --></div>
    </div>


    <input type="button" value="发布文章" onclick="tj()" class="layui-btn">

</form>

{/block}



{block name='js'}





<!-- 引入 wangEditor.min.js -->
<script>
    const { createEditor, createToolbar } = window.wangEditor


    const editorConfig = {
        scroll:true,
        placeholder: 'Type here...',
        onChange(editor) {
            const html = editor.getHtml()
            // console.log('editor content', html)
            // 也可以同步到 <textarea>
        },
        MENU_CONF: {
            uploadImage:{

                server:'{:url("admin/Article/imgUpload")}',

                // form-data fieldName ，默认值 'wangeditor-uploaded-image'
                fieldName: 'myFileName',

                // 单个文件的最大体积限制，默认为 2M
                maxFileSize: 1 * 1024 * 1024, // 1M

                // 最多可上传几个文件，默认为 100
                maxNumberOfFiles: 10,

                // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                allowedFileTypes: ['image/*'],

                // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                meta: {
                    token: 'xxx',
                    otherKey: 'yyy'
                },

                // 将 meta 拼接到 url 参数中，默认 false
                metaWithUrl: false,

                // 自定义增加 http  header
                headers: {
                    Accept: 'text/x-json',
                    otherKey: 'xxx'
                },

                // 跨域是否传递 cookie ，默认为 false
                withCredentials: true,

                // 超时时间，默认为 10 秒
                timeout: 5 * 1000, // 5 秒
            },
            uploadVideo:{
                server: '{:url("admin/Article/videoUpload")}',
                // form-data fieldName ，默认值 'wangeditor-uploaded-video'
                fieldName: 'your-custom-name',

                // 单个文件的最大体积限制，默认为 10M
                maxFileSize: 30 * 1024 * 1024, // 30M

                // 最多可上传几个文件，默认为 5
                maxNumberOfFiles: 3,

                // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
                allowedFileTypes: [],

                // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                meta: {
                    token: 'xxx',
                    otherKey: 'yyy'
                },

                // 将 meta 拼接到 url 参数中，默认 false
                metaWithUrl: false,

                // 自定义增加 http  header
                headers: {
                    Accept: 'text/x-json',
                    otherKey: 'xxx'
                },

                // 跨域是否传递 cookie ，默认为 false
                withCredentials: true,

                // 超时时间，默认为 30 秒
                timeout: 15 * 1000, // 15 秒

                // 视频不支持 base64 格式插入
            }

        }

    }

    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'default', // or 'simple',
    })

    const toolbarConfig = {}

    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default', // or 'simple'
    })



</script>

<!--渲染栏目选择器-->
<script>
    //树形选择框
    layui.config({
        base: '__ROOT__/public/static/layui/'
    }).extend({
        treeSelect: 'treeSelect'
    });
    layui.use(['treeSelect', 'form', 'layer'], function () {
        var treeSelect= layui.treeSelect,
            form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;

        treeSelect.render({
            // 选择器
            elem: '#tree',
            // 数据
            data: '{:url("admin/column/sendChooseColumn")}',
            // 异步加载方式：get/post，默认get
            type: 'post',
            // 占位符
            placeholder: '选择栏目',
            // 是否开启搜索功能：true/false，默认false
            search: true,
            // 一些可定制的样式
            style: {
                folder: {
                    enable: true
                },
                line: {
                    enable: true
                }
            },
            // 点击回调
            click: function(d){
                // console.log(d);

            },
            // 加载完成后的回调函数
            success: function (d) {
                // console.log(d);
//                选中节点，根据id筛选
                //treeSelect.checkNode('tree', 3);

                console.log($('#tree').val());

//                获取zTree对象，可以调用zTree方法
                var treeObj = treeSelect.zTree('tree');
                // console.log(treeObj);

//                刷新树结构
                treeSelect.refresh('tree');
            }
        });

    });




</script>

<script>

    //文章提交
    function tj() {


        $("#forms").ajaxSubmit({
            url:"{:url('admin/article/ArticleSubmit')}",
            type:"post",
            data: {
                "columnId":$("#tree").val(),//栏目id
                "text": editor.getText(),//纯文本内容，不含html标签
                "html":editor.getHtml()
            },success: function (rsp){
                rsp=$.parseJSON(rsp);
                if (rsp['code']>0){

                    layer.msg('文章发布成功');

                    setTimeout(function() {
                        location.reload(true)//页面刷新
                    }, 1000);
                }else {
                    layer.msg(rsp['message'])
                }


            }

        })

    }


</script>

<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
            ,type:'datetime'
        });


    });


    layui.use(['upload', 'element', 'layer'], function() {
        var $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;



        var uploadInst = upload.render({
            size:2048
            ,elem: '#test2'
            ,url: '{:url("admin/Article/thumbnailUpload")}' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });

                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作
                //……
                $('#demoText').html(''); //置空上传失败的状态

                $("#thumbnailUrl").val(res.data.src)//将隐藏域的value值设置为缩略图的url，便于表单提交
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });


    });
</script>


{/block}